<template>
	<view class="footer">
		<!-- f1:底部导航 -->
		<view class="f1">
			<!-- 跳转到由页签的页面 -->
			<navigator url="../../pages/user-center/user-center" open-type="switchTab">登录</navigator>
			<text>|</text>
			<navigator url="../../pages/user-center/user-center" open-type="switchTab">注册</navigator>
			<text>|</text>
			<navigator url="../../pages/services/services" open-type="navigate">客户服务</navigator>
			<text>|</text>
			<text @click="backToTop">返回顶部</text>
		</view>
		<!-- f2:四宫格菜单 -->
		<view class="f2">
			<view class="item">
				<image class="icon" src="../../static/img/icon1.png" mode=""></image>
				<text class="txt">品质保障</text>
			</view>
			<view class="item">
				<image class="icon" src="../../static/img/icon2.png" mode=""></image>
				<text class="txt">私人订制</text>
			</view>
			<view class="item">
				<image class="icon" src="../../static/img/icon3.png" mode=""></image>
				<text class="txt">学员特供</text>
			</view>
			<view class="item">
				<image class="icon" src="../../static/img/icon4.png" mode=""></image>
				<text class="txt">专属特权</text>
			</view>
		</view>
		<!-- f3:版权声明-->
		<view class="f3">
			<text>达内科技 版权所有 京ICP备08000853号-75</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			backToTop() {
				// 滚动到页面顶部
				uni.pageScrollTo({
					scrollTop: 0
				});
			},
		},
	}
</script>

<style lang="scss">
	.footer {
		background-color: #fff;
		box-shadow: 0 0 6rpx $uni-border-color;
		margin: $uni-spacing-col-lg 0 0 0; //12px

		.f1 {
			display: flex;
			justify-content: space-evenly;
			padding: $uni-spacing-col-base 0; //8px
			border-bottom: 1px solid $uni-border-color;
		}

		.f2 {
			// 变为弹性容器，主轴使用默认的横轴
			display: flex;

			.item {
				flex: 1;
				display: flex;
				flex-direction: column; // 主轴方向为纵向
				align-items: center;
				padding: $uni-spacing-col-base 0; //8px
				border-bottom: 1px solid $uni-border-color;

				.icon {
					height: 80rpx;
					width: 80rpx;
				}
			}
		}

		.f3 {
			text-align: center;
			padding: $uni-spacing-col-lg 0; //12px
		}
	}
</style>
